<template>
       <div>
       <!-- <div class="content"> 
        <div class="buttons">
          <el-button @click="handButton($event)">添加</el-button>
          <el-button @click="handButton($event)">修改</el-button>
          <el-button @click="handButton($event)">删除</el-button>
        </div>
      </div> -->


      <el-table
        
          :data="tableData"
          :row-style="{height: '60px'}"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >

          <el-table-column
            type="selection"
            width="55px"
            fixed="left"
          >
        </el-table-column>

          <el-table-column
            label="序号"
            type="index"
          >
            <template scope="scope">
              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column
            v-for="(item,index) in title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          >

            <!-- 提示 -->
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                :disabled="tooltipDisabled"
                effect="dark"
                placement="top-start"
              >
                <div
                  class="tableTooltip"
                  @mouseenter="spanMouseenter($event)"
                >{{ scope.row[item.prop] }}</div>
                <div
                  slot="content"
                  style="max-width: 200px;"
                >{{ scope.row[item.prop] }}</div>
              </el-tooltip>
            </template>

          </el-table-column>

        </el-table>
        <div class="page">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <div>

    </div>



       </div>
    
  </template>
  
  <script>
  import {getOrder} from "@/api/dataReq"
  export default {
    name: 'merorder',
    // components: {},
    // props:{
    //     names:{
    //         type:Array,
    //         default:()=>{return []}
    //     }
    // },
        

    data() {
      return {
        title: [
        { prop: 'uid', label: '订单号' },
        { prop: 'goods_name', label: '商品名字' },
        { prop: 'createtime', label: '下单时间' },
        { prop: 'price', label: '单价' },
        { prop: 'number', label: '数量' },
        { prop: 'total', label: '总价格' },
        { prop: 'isrush', label: '抢购' },
        { prop: 'user_name', label: '购买人' },

        
       
      ],
      tableData: [{name:'aaa', classify:1, describe:2, create_time:125, price:20, isShelves:0}],
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页多少行
      total: 10, // 总页数
      multipleSelection: [], // 选中的
      imgShow: '',
      tooltipDisabled: true, // 控制tooltip显示
      loading: true,
      dialogVisible:false
      }
    },
    computed: {},
    created() {
      this.getData()
    },
    methods: {
      getData(){
        var reqData  ={
        page_size: this.pageSize,
        page_num: this.currentPage,
        merchant:1
      }
        getOrder(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
            // console.log(typeof(response.data[0]))
           this.tableData = this.parseData(response.data)

          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
    },
    parseData(data){
        data.forEach((item) => {
              item.isrush = item.isrush == '0' ? '否' : '是'
              
            })
        
        return data
      },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
handleCurrentChange(val) {
    // console.log(`当前页: ${val}`);
    this.currentPage = val
    this.getData()
},
handleClick(){

},
handleClose(){

},
handleSelectionChange(){

},
spanMouseenter(ev) {
if (ev.target.clientWidth < ev.target.scrollWidth) {
  this.tooltipDisabled = false
} else {
  this.tooltipDisabled = true
}
}
    }
  }
  </script>
  <style lang="scss" scoped>
  .page{
    display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
  }
  ::v-deep {
  .tableTooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
  </style>
  